{% block content %}
<html>
<head>
    <style type="text/css">
      table.diff { font-family: arial;  border:medium; width: 100%;font-size: 10px }
      .diff_header { background-color:#e0e0e0; }
      th.diff_header { width: 49%; }
      td.diff_header { text-align:right; cursor: pointer; width:1% }
      td.diff_header.has_comments { color: white; background-color: blue; }
      .diff_next { background-color:#c0c0c0; }
      .diff_add { background-color:#aaffaa; }
      .diff_chg { background-color:#ffff77; }
      .diff_sub { background-color:#ffaaaa; }
      .comment_author { text-align: right; }
    </style>
    <script src="/media/scripts/Mochikit.js"></script>
    <script>
    function  hideAll(){
        var arreglo = getElementsByTagAndClassName("DIV",'divDiff',null);
        for (var i=0;i<arreglo.length;i++){
            arreglo[i].style.display="none";
        }
    }
    function  showAll(){
        var arreglo = getElementsByTagAndClassName("DIV",'divDiff',null);
        for (var i=0;i<arreglo.length;i++){
            arreglo[i].style.display="";
        }
    }
    function showHide(element){
        if (element.style.display=="none")
            element.style.display="";
        else
            element.style.display="none";
    }
    
    </script>
</head>
<body>
<div class="section">
  <h2>Diff <a href="javascript:;" onclick="hideAll()">&lt;Hide All&gt;</a>
  <a href="javascript:;" onclick="showAll()">&lt;Show All&gt;</a>
  </h2>
    {% autoescape off %}
        {% for d in diffs%}
        
            <a href="javascript:;" onclick="showHide($('{{d.path}}'))">{{d.path}}</a>[{{d.action}}]<br>
            <div id="{{d.path}}" class="divDiff">
                {{d.html}}        
            </diV>
            <br/>
        {% endfor %}
    {% endautoescape %}
</div>
{% endblock %}